document.addEventListener('DOMContentLoaded', async function () {

  // ------------------------ 发送请求，获取首页需要的统计数据 -------------------
  await axios.get('/dashboard').then(res => {
    // console.log(res) // { message: 'xxx', data: { groupData, overview, .... } }
    // let {data: { groupData, overview, provinceData, salaryData, year }} = res

    // console.log(res.data) // { overview:xx, year: xx, salaryData: yy, }
    let { groupData, overview, provinceData, salaryData, year } = res.data
    console.log(res.data)
    // console.log(overview) // 开头的 概览数据 {salary: 16778, student_count: 80, age: 24, group_count: 8}
    // document.querySelector('[name=salary]').innerHTML = overview.salary
    // document.querySelector('[name=student_count]').innerHTML = overview.student_count
    // document.querySelector('[name=age]').innerHTML = overview.age
    // document.querySelector('[name=group_count]').innerHTML = overview.group_count
    for (let key in overview) {
      document.querySelector(`[name=${key}]`).innerHTML = overview[key]
    }
    lineChart(year) // 把year传递给折线图
    groupSalaryChart(groupData) // 把 groupData 传递给柱状图
    mapChart(provinceData) // 把 provinceData 传递给地图
    classSalaryChart(salaryData) // 传递给饼图
    sexSalaryChart(salaryData) // 传递给饼图
  })
})
// ------------------------------ 折线图 - 薪资走势 ---------------------------

let lineChart = (data) => {
  let myChart = echarts.init(document.querySelector('#line'))
  let option = {
    xAxis: {
      type: 'category',
      // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      data: data.map(item => item.month),
      // x轴文字配置
      axisLabel: {
        color: '#999'
      },
      // 轴线设置
      axisLine: {
        // 轴线样式设置
        lineStyle: {
          color: '#ccc',
          type: 'dashed'
        }
      }
    },
    yAxis: {
      type: 'value',
      // Y轴分割线配置
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    // 标题配置
    title: {
      text: '2022全学科薪资走势',
      top: 15,
      left: 10,
      textStyle: {
        fontSize: 16
      }
    },
    // 鼠标移入提示
    tooltip: {
      // trigger: 'item', // 鼠标放到具体的小点上，会提示
      trigger: 'axis' // 表示鼠标放到轴上即可触发
    },
    // 直角坐标系网格设置（图表的大小设置）
    grid: {
      top: '20%'
    },
    series: [
      {
        // data: [9000, 12000, 15000, 13000, 10000, 18000, 14000, 10000, 12000, 13000, 15000, 19000],
        data: data.map(item => item.salary),
        type: 'line', // line表示折线图，bar表示柱状图，pie表示饼图
        smooth: true, // 表示使用平滑曲线
        lineStyle: {
          width: 6 // 线条粗细
        },
        symbolSize: 10, // 拐点处的标记大小
        // symbol: 'image://http://www.itcbc.com:3006/formdata/123.png' // 拐点处的标记
        // 区域面积颜色
        areaStyle: {
          color: {
            type: 'linear', // 表示线性渐变
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#499FEE' // 0% 处的颜色
              },
              {
                offset: 0.8,
                color: 'rgba(255,255,255,0.2)'
              },
              {
                offset: 1,
                color: 'rgba(255,255,255,0)' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false。一般都不需要修改。（如果是true，则哪些数字0/1等等表示真实的像素值了）
          }
        }
      }
    ],
    // 线条的颜色（使用线性渐变）
    color: {
      type: 'linear', // 表示线性渐变
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [
        {
          offset: 0,
          color: '#499FEE' // 0% 处的颜色
        },
        {
          offset: 1,
          color: '#5D75F0' // 100% 处的颜色
        }
      ],
      global: false // 缺省为 false。一般都不需要修改。（如果是true，则哪些数字0/1等等表示真实的像素值了）
    }
  }
  myChart.setOption(option) // setOption 中第1个O是大写的
}
// lineChart()

// ------------------------------ 饼图 - 班级薪资分布 ---------------------------

const classSalaryChart = (data) => {
  let myChart = echarts.init(document.querySelector('#salary'))
  let option = {
    // 标题配置
    title: {
      text: '班级薪资分布',
      left: 10, // 10 表示10px
      top: 15,
      textStyle: {
        fontSize: 16
      }
    },
    // 鼠标移入的提示
    tooltip: {
      trigger: 'item'
    },
    // 图例的设置
    legend: {
      bottom: '6%',
      left: 'center'
      // itemWidth: 12
    },
    // 颜色的设置
    color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
    // 系列数据
    series: [
      {
        name: '班级薪资分布', // 这个名字会显示在 提示框中
        type: 'pie', // 表示饼图
        radius: ['50%', '64%'], // 内外圈的半径
        // 每一项的样式
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        // 文字标签不显示
        label: {
          show: false,
          position: 'center'
        },
        // 视觉引导线不显示
        labelLine: {
          show: false
        },
        // data: [
        //   { value: 1048, name: '1万以下' },
        //   { value: 235, name: '1万-2万' },
        //   { value: 580, name: '1.5万-2万' },
        //   { value: 484, name: '2万以上' }
        // ]
        data: data.map(item => {
          return {
            value: item.g_count + item.b_count,
            name: item.label
          }
        })
      }
    ]
  }
  myChart.setOption(option)
}
// classSalaryChart()

// ------------------------------ 饼图 - 男女生薪资分布 ---------------------------
const sexSalaryChart = (data) => {
  let myChart = echarts.init(document.querySelector('#gender'))
  let option = {
    // 标题配置
    title: [
      {
        text: '男女薪资分布',
        left: 10, // 10 表示10px
        top: 10,
        textStyle: {
          fontSize: 16
        }
      },
      {
        text: '男生',
        left: '45%', // 10 表示10px
        top: '45%',
        textStyle: {
          fontSize: 12
        }
      },
      {
        text: '女生',
        left: '45%', // 10 表示10px
        top: '85%',
        textStyle: {
          fontSize: 12
        }
      }
    ],
    // 鼠标移入的提示
    tooltip: {
      trigger: 'item'
    },
    // 颜色的设置
    color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
    // 系列数据
    series: [
      {
        name: '男生薪资分布', // 这个名字会显示在 提示框中
        type: 'pie', // 表示饼图
        center: ['50%', '30%'], // 圆心点坐标
        radius: ['20%', '30%'], // 内外圈的半径
        // data: [
        //   { value: 1048, name: '1万以下' },
        //   { value: 235, name: '1万-2万' },
        //   { value: 580, name: '1.5万-2万' },
        //   { value: 484, name: '2万以上' }
        // ]
        data: data.map(item => ({ name: item.label, value: item.b_count }))
      },
      {
        name: '女生薪资分布', // 这个名字会显示在 提示框中
        type: 'pie', // 表示饼图
        center: ['50%', '70%'], // 圆心点坐标
        radius: ['20%', '30%'], // 内外圈的半径
        // data: [
        //   { value: 1048, name: '1万以下' },
        //   { value: 235, name: '1万-2万' },
        //   { value: 580, name: '1.5万-2万' },
        //   { value: 484, name: '2万以上' }
        // ]
        data: data.map(item => ({ name: item.label, value: item.g_count }))
      }
    ]
  }
  myChart.setOption(option)
}
// sexSalaryChart()

// --------------------------- 柱状图：班级每组薪资 --------------------------------
const groupSalaryChart = (data) => {
  let myChart = echarts.init(document.querySelector('#lines'))
  let option = {
    // x轴，y轴，复制折线图（自己修改一下人名）
    xAxis: {
      type: 'category',
      // data: ['张三', '李四', '赵云', '张飞', '马超', '黄忠', '亚索', '盲僧'],
      data: data[1].map(item => item.name),
      // x轴文字配置
      axisLabel: {
        color: '#999'
      },
      // 轴线设置
      axisLine: {
        // 轴线样式设置
        lineStyle: {
          color: '#ccc',
          type: 'dashed'
        }
      }
    },
    yAxis: {
      type: 'value',
      // Y轴分割线配置
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    // 系列数据，需要两份数据，所以复制一个小对象（加入name属性，把数据改改）
    series: [
      {
        // data: [12200, 17932, 13901, 13934, 21290, 23300, 13300, 13320],
        data: data[1].map(item => item.hope_salary),
        type: 'bar',
        name: '期望薪资'
      },
      {
        // data: [22820, 19932, 16901, 15934, 31290, 13300, 14300, 18320],
        data: data[1].map(item => item.salary),
        type: 'bar',
        name: '实际薪资'
      }
    ],
    // 输入移入的提示
    tooltip: {},
    // 颜色设置 color: ['第1个柱子颜色', '第2个柱子颜色']
    color: [
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#34D39A' // 0% 处的颜色
          },
          {
            offset: 1,
            color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      },
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#499FEE' // 0% 处的颜色
          },
          {
            offset: 1,
            color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      }
    ],
    // 网格设置（向四外拉伸一下图表）
    grid: {
      top: 30,
      bottom: 50,
      left: 70,
      right: 30
    }
  }
  // myChart.setOption(option)
  // 每个组的单击事件，必须放到函数内部（因为后面要换图表数据）
  let btns = document.querySelector('#btns')
  // 给包含按钮的大盒子注册单击事件
  btns.addEventListener('click', function (e) {
    // 判断点击的是否是按钮
    if (e.target.nodeName === 'BUTTON') {
      // 排它思想，把标签的效果做一下
      // 找到包含btn-blue类的元素，去掉btn-blue类
      btns.querySelector('.btn-blue').classList.remove('btn-blue')
      // 再给点击的那个按钮，加上 btn-blue
      e.target.classList.add('btn-blue')

      // 获取，点击的是第几组
      let group = e.target.innerHTML
      // console.log(group)
      // 更换图表中的数据
      option.xAxis.data = data[group].map(item => item.name)
      option.series[0].data = data[group].map(item => item.hope_salary)
      option.series[1].data = data[group].map(item => item.salary)
      // 重新创建图表
      myChart.setOption(option)
    }

  })
  myChart.setOption(option)
}
// groupSalaryChart()

// --------------------------- 地图：籍贯分布 --------------------------------
const mapChart = (data) => {
  const mapData = [
    { name: '南海诸岛', value: 0 },
    { name: '北京', value: 3 },
    { name: '天津', value: 2 },
    { name: '上海', value: 4 },
    { name: '重庆', value: 1 },
    { name: '河北', value: 20 },
    { name: '河南', value: 23 },
    { name: '云南', value: 0 },
    { name: '辽宁', value: 15 },
    { name: '黑龙江', value: 12 },
    { name: '湖南', value: 2 },
    { name: '安徽', value: 5 },
    { name: '山东', value: 18 },
    { name: '新疆', value: 0 },
    { name: '江苏', value: 5 },
    { name: '浙江', value: 1 },
    { name: '江西', value: 4 },
    { name: '湖北', value: 3 },
    { name: '广西', value: 2 },
    { name: '甘肃', value: 9 },
    { name: '山西', value: 11 },
    { name: '内蒙古', value: 14 },
    { name: '陕西', value: 14 },
    { name: '吉林', value: 10 },
    { name: '福建', value: 0 },
    { name: '贵州', value: 0 },
    { name: '广东', value: 0 },
    { name: '青海', value: 3 },
    { name: '西藏', value: 0 },
    { name: '四川', value: 1 },
    { name: '宁夏', value: 1 },
    { name: '海南', value: 0 },
    { name: '台湾', value: 0 },
    { name: '香港', value: 0 },
    { name: '澳门', value: 0 }
  ]
  let myChart = echarts.init(document.querySelector('#map'))
  let option = {
    // 视觉映射组件
    visualMap: {
      type: 'continuous', // continuous表示连续型； piecewise表示分段式
      min: 0,
      max: 20, // 看每个地区的学员多少，再来决定
      inRange: {
        color: ['#fff', '#0075F0']
      },
      text: [20, 0], // 两端的文字
      left: 40,
      bottom: 20
    },
    // 标题配置
    title: {
      text: '籍贯分布',
      top: 15,
      left: 10,
      textStyle: {
        fontSize: 16
      }
    },
    // 肯定需要配置的有：series
    series: [
      {
        name: '籍贯分布', // 添加系列数据的名字（和鼠标移入的提示有关系）
        type: 'map',
        map: 'china', // 具体是什么地图
        // 显示文本标签（每个区域、每个省的名字）
        label: {
          show: true,
          color: 'rgba(0, 0, 0, 0.7)',
          fontSize: 10
        },
        // label: {
        //   normal: { //静态的时候展示样式
        //     show: true, //是否显示地图省份得名称
        //     textStyle: {
        //       color: "#fff",
        //       fontSize: 12
        //     }
        //   },
        //   emphasis: { //动态展示的样式
        //     color: '#fff',
        //   },
        // },
        // 每个区域（省）【默认】的样式
        itemStyle: {
          areaColor: '#E0FFFF',
          borderColor: 'rgba(0, 0, 0, 0.2)'
        },
        // 高亮状态，每个区域的配置
        emphasis: {
          // 高亮状态下（鼠标移入状态，或者选中状态下）
          itemStyle: {
            areaColor: '#34D39A',
            shadowBlur: 20,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        // 每个区域的数据
        data: mapData
      }
    ],
    // 鼠标移入的提示
    tooltip: {
      formatter: '{b}：{c}位学员', // {a}是series里面大的name；{b}表示每个区域的名字(省的名字)；{c}表示该地区的值
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      borderColor: 'transparent',
      textStyle: {
        color: '#fff'
      }
    }
  }
  mapData.forEach(item => {
    // 遍历第2次，item = { name: '北京', value: 0 }
    // 然后，从服务器返回的data中，找 北京，如果有 北京，则把value改了
    let res = data.find(it => {
      let n = it.name.replace(/市|省|自治区|特别行政区|壮族自治区|维吾尔自治区|回族自治区/, '')
      return n === item.name
    }) // res = { name: '北京', value: 3 }
    // 判断，如果服务器返回的数据中，有这个省（市），则把value改一下
    if (res) {
      item.value = res.value
    }
  })
  myChart.setOption(option)
}
// mapChart()


